<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript" language="javascript"
            src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript"
            src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        var link = "/watchlist";
        // link = "http://127.0.0.1:8003/watchlist";

        function deleteWatch(code) {
            var delLink = link+'/delete/'+code;
            $.get(delLink, function(data){
                post();
            });
        }
        var table;
        function post(){
            $.getJSON(link, function (data) {
                if(table!=null){
                    table.clear();
                    table.rows.add(data).draw();
                    return;
                }

                table=$('#stockTable').DataTable({
                    data: data,
                    columns: [
                        {
                            data: 'code',
                            render: function (data, type, row, meta) {
                                return type === 'display' ?
                                    `<a href="${row.url}" target="_blank">${data}</a>` :
                                    // '<a href="' + row.url + '">'+data+'</a>' :
                                    data;
                            }
                        },
                        {data: 'name'},

                        {
                            data: 'range',
                            render: function (data, type, row, meta) {
                                if (row.range == null) {
                                    return '';
                                } else {
                                    return row.range;
                                }
                            }
                        },
                        {
                            data: 'maxRange',
                            render: function (data, type, row, meta) {
                                if (row.maxRange == null) {
                                    return '';
                                } else {
                                    return row.maxRange;
                                }
                            }
                        },
                        {
                            data: 'minRange',
                            render: function (data, type, row, meta) {
                                if (row.minRange == null) {
                                    return '';
                                } else {
                                    return row.minRange;
                                }
                            }
                        },
                        {
                            data: 'time',
                            render: function (data, type, row, meta) {
                                var time = row.time;
                                var date = /\d{4}-\d{1,2}-\d{1,2}/g.exec(time);
                                return date;
                            }
                        },
                        {
                            data: 'code',
                            render: function (data, type, row, meta) {
                                var code = row.code;
                                return type === 'display' ?
                                    `<a href="/demark-flag.html?code=${code}" target="_blank">图形版</a>`:
                                    data;
                            }
                        },
                        {
                            data: 'code',
                            render: function (data, type, row, meta) {
                                var code = row.code;
                                return type === 'display' ?
                                    `<a href="#" onclick="deleteWatch('${code}')"><i class="fa fa-trash-o"></i></a>`:
                                    data;
                            }
                        }
                    ]
                });
            });
        }

        $(document).ready(function () {
            post();
        });
    </script>
</head>
<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png" >  <h4 class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>


<section class="hero is-light is-info">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">
                我的关注
            </h1>
        </div>
    </div>
</section>


<section class="section">
    <div class="container">
        <table id="stockTable" class="display compact" style="width:100%">
            <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>涨幅</th>
                <th>最大涨幅</th>
                <th>最大跌幅</th>
                <th>关注时间</th>
                <th>回溯</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</section>
<hr>
</body>
</html>